<template>
  <div>
  <el-row :gutter="12">
  <el-col :span="24">
    <el-card shadow="always">
      <div class="textinfo">服务器开机时间：  <el-badge :value="sysinfo.starttime" class="item"></el-badge> 
      物理内核： <el-badge :value="sysinfo.phyNum" class="item">
</el-badge></div>
    </el-card>
    
  </el-col>
  </el-row>
<el-row :gutter="0" style="margin-top:20px;">
  <el-col :span="12" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
    <el-card shadow="always">
      <div id="weekinfo"></div>
    </el-card>
  </el-col>
</el-row>
<el-row :gutter="12" style="margin-top:20px;">
  <el-col :span="8" :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
    <el-card shadow="always">
      <div id="membox"></div>
    </el-card>
  </el-col>

  <el-col :span="8" :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
    <el-card shadow="always">
      <div id="cpubox"></div>
    </el-card>
  </el-col>
    <el-col :span="8" :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
    <el-card shadow="always">
      <div id="diskbox"></div>
    </el-card>
  </el-col>
  </el-row>

  </div>
</template>

<script>
import post from "@/post"
import * as  echarts from 'echarts'
export default {
  data(){
    return {
      mw : 0,
      sysinfo : {

      },
      weekinfo : {

      }
    }
  },
  mounted(){
    let it = this
    post("sysinfo",{}).then(d=>{
      
      it.sysinfo = d
      it.echarts()
      it.echarts2()
      it.echarts3()
    })

    post("useinfo",{}).then(d=>{
      it.weekinfo = d.data
      it.echarts4()
    })

    
  },

  methods:{
    echarts(){
      var membox = document.getElementById('membox')
      membox.style.height = membox.clientWidth * .6 + "px"
      var memChart = echarts.init(membox);
      var option;

      option = {
          title: {
              text: '内存使用',
              subtext: '单位：G',
              left: 'center'
          },
          tooltip: {
              trigger: 'item'
          },
          legend: {
              top: '90%',
              left: 'center'
          },
          series: [
              {
                  name: '大小',
                  type: 'pie',
                  radius: ['40%', '70%'],
                  avoidLabelOverlap: false,
                  itemStyle: {
                      borderRadius: 10,
                      borderColor: '#fff',
                      borderWidth: 2
                  },
                  label: {
                      show: false,
                      position: 'left'
                  },
              
                  labelLine: {
                      show: false
                  },
                  data: [
                    
                      {value: parseFloat(this.sysinfo.mem.used/ 1024 / 1024 / 1024).toFixed(2), name: '已使用'},
                      {value: parseFloat((this.sysinfo.mem.total - this.sysinfo.mem.used)/ 1024 / 1024 / 1024).toFixed(2), name: '空闲'},
                  ]
              }
          ]
      };

      option && memChart.setOption(option);
    },
    echarts2(){
      var cpubox = document.getElementById('cpubox')
      cpubox.style.height = cpubox.clientWidth * .6 + "px"
      var memChart = echarts.init(cpubox);

      let option = option = {
        title: {
              text: '使用率',
              left: 'center'
            },
          series: [{
            
              type: 'gauge',
              anchor: {
                  show: true,
                  showAbove: true,
                  size: 14,
                  itemStyle: {
                      color: '#FAC858'
                  }
              },
              pointer: {
                  icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                  width: 8,
                  length: '80%',
                  offsetCenter: [0, '8%']
              },

              progress: {
                  show: true,
                  overlap: true,
                  roundCap: true
              },
              axisLine: {
                  roundCap: true
              },
              data: [{
                  value:  parseFloat(this.sysinfo.totalPercent).toFixed(2),
                  name: 'cpu使用率',
                  title: {
                      offsetCenter: ['-80%', '90%']
                  },
                  detail: {
                      offsetCenter: ['-80%', '105%']
                  }
              },
              {
                  value: parseFloat(this.sysinfo.mem.usedPercent).toFixed(2),
                  name: '内存使用率',
                  title: {
                      offsetCenter: ['0%', '90%']
                  },
                  detail: {
                      offsetCenter: ['0%', '105%']
                  }
              },
              {
                  value:  parseFloat(this.sysinfo.disk.usedPercent).toFixed(2),
                  name: '磁盘使用率',
                  title: {
                      offsetCenter: ['80%', '90%']
                  },
                  detail: {
                      offsetCenter: ['80%', '105%']
                  }
              }
              ],
              title: {
                  fontSize: 12
              },
              detail: {
                  width: 40,
                  height: 14,
                  fontSize: 12,
                  color: '#fff',
                  backgroundColor: 'auto',
                  borderRadius: 3,
                  formatter: '{value}%'
              }
          }]
      };
      memChart.setOption(option);
    },
    echarts3(){
      var diskbox = document.getElementById('diskbox')
      diskbox.style.height = diskbox.clientWidth * .6 + "px"
      var memChart = echarts.init(diskbox);
      var option;

      option = {
          title: {
              text: '磁盘使用',
              subtext: '单位：G',
              left: 'center'
          },
          tooltip: {
              trigger: 'item'
          },
          legend: {
              top: '90%',
              left: 'center'
          },
          series: [
              {
                  name: '大小',
                  type: 'pie',
                  radius: ['40%', '70%'],
                  avoidLabelOverlap: false,
                  itemStyle: {
                      borderRadius: 10,
                      borderColor: '#fff',
                      borderWidth: 2
                  },
                  label: {
                      show: false,
                      position: 'left'
                  },
              
                  labelLine: {
                      show: false
                  },
                  data: [
                    
                      {value: parseFloat(this.sysinfo.disk.used/ 1024 / 1024 / 1024).toFixed(2), name: '已使用'},
                      {value: parseFloat(this.sysinfo.disk.free/ 1024 / 1024 / 1024).toFixed(2), name: '空闲'},
                  ]
              }
          ]
      };

      option && memChart.setOption(option);
    },
    echarts4(){
      var weekinfo = document.getElementById('weekinfo');
      weekinfo.style.height = weekinfo.clientWidth * .6 + "px"
      var myChart = echarts.init(weekinfo);
      var option;
     //  
     var data = Object.keys(this.weekinfo),list={};
     for(let x in this.weekinfo){
      var v = this.weekinfo[x]
  

        for(var xx in v ){
          var xn;
          if(xx=="admin_api")  xn = "后台api请求数"
          else if(xx=="wchat_api") xn = "关牌api请求数"
          else if(xx=="gamenum") xn = "游戏局数"
          else if(xx=="newuser") xn = "新增用户"
          if(!list[xx]){
            list[xx] = {
              name : xn,
              type: 'line',
              stack: '数量',
              data : []
            }
            
          }
          list[xx].data.push(v[xx])
       }

     }

      option = {
          title: {
              text: '7日概览'
          },
          tooltip: {
              trigger: 'axis'
          },
          legend: {
              data: ['后台api请求数', '关牌api请求数', '游戏局数', '新增用户']
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          toolbox: {
              // feature: {
              //     saveAsImage: {}
              // }
          },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              data: data
          },
          yAxis: {
              type: 'value'
          },
          series:Object.values(list)
      };

      option && myChart.setOption(option);

    },
  }
}
</script>

<style scoped>
.textinfo{
  text-align: left;
  padding:5px 10px;
  color: #666;
  font-size:12px;
}
.textwarn{
  color: #F56C6C;
}
</style>

